<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
		<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
		<title>冷链可视化平台</title>
		<script type="text/javascript" src="./js/jquery-3.1.1.min.js"></script>
		<script type="text/javascript" src="./js/echarts.min.js"></script>
		<script type="text/javascript" src="./map/hebei.js"></script>
		<script type="text/javascript" src="./js/extendsMap.js"></script>

		<!--jquery-->
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/jquery.liMarquee.js"></script>
		<script type="text/javascript" src="js/jquery.cxselect.min.js"></script>
		<!-- 	<script type="text/javascript" src="js/echarts.min.js"></script> -->
		<!--自定义js-->
		<script type="text/javascript" src="js/js.js"></script>
		<link href="css/style.css"  rel="stylesheet" type="text/css" media="all" />
		<!--<script src="js/echarts.min.js" charset="utf-8"></script>-->
		<!--自定义样式-->
		<link rel="stylesheet" href="css/comon0.css">
		<!--自定义css-->
		<style>
			/*天、月、季、年按钮*/
			.btn-time {
				background-color: darkblue;
				width: 40px;
				height: 25px;
				color: #FFFFFF;
			}			
		</style>
		    <style>
		       /* html, body, #container {
		            height: 100%;
		            width: 100%;
		        }
		 */
		        .amap-icon img{
		            width: 30px;
		            height: 34px;
		        }
				</style>
	</head>
	<body bgcolor="#0B1746">
     <div style="background:#000d4a url(images/bg.jpg) center top;">
        <div class="loading">
            <div class="loadbox"> <img src="images/loading.gif"> 页面加载中... </div>
        </div>
        <div class="back"></div>
        <div class="head">
            <div class="weather" ><span id="showTime"></span></div>
            <h1 >冷链设备温湿度大数据平台</h1>
			</div>
			<script>
				var t = null;
            t = setTimeout(time, 1000);/*開始运行*/
            function time() {
                clearTimeout(t);/*清除定时器*/
                dt = new Date();
                var y = dt.getFullYear();
                var mt = dt.getMonth() + 1;
                var day = dt.getDate();
                var h = dt.getHours();
                var m = dt.getMinutes();
                var s = dt.getSeconds();
                document.getElementById("showTime").innerHTML = y + "年" + mt + "月" + day + "日" + h + "时" + m + "分" + s + "秒";
                t = setTimeout(time, 1000); 
            }
        </script>
			<!--主要内容-->
			<div class="mainbox">
				<div style="width:100%;height:35px">						
							<div class="bnt">
							<span class="topbnt_left fl" >
								<ul><li ><select  id="sel" onchange="gradeChange(this.options[this.options.selectedIndex].text)" onclick="showAndHidden2()"
								 style="background-color: transparent; border: 0;color:#FFFFFF;height:35px;width:70px;" name="jumpMenu">
												<option value="0">冷链选择</option>
												<option value="冷链1">冷链1</option>
												<option value="冷链2">冷链2</option>
										</select>
									</li>
								</ul>
							</div>
							<span class=" fr topbnt_right">
							<ul>   						 
								<li><a href="index.html">返回首页</a></li>
								<li><button  type="button" id="resume" onclick="resumeAnimation()" style="background-color: transparent; border: 0;color:#FFFFFF;">冷链继续</button></a></li>
								<li><button type="button" id="pause" onclick="pauseAnimation()" style="background-color: transparent; border: 0;color:#FFFFFF;">冷链暂停</button></a></li>
								<li><button type="button" id="start" onclick="startAnimation()" style="background-color: transparent; border: 0;color:#FFFFFF;">冷链开始</button></a></li>  						 	
							</ul>
							</span>					
					</div>					
				
				<ul class="clearfix">
					<!--左-->
					<li style="width:24%;" >
						<!--左上-->
						<div class="boxall" style="height:600px">
							<div class="alltitle" style="color:#FFFFFF;">企业名称</div>
							<div class="navboxall"  style="height:100%;width:100%;overflow:auto;background-color:transparent;">
								<table class="table1" width="100%" border="0" cellspacing="0" cellpadding="0" onclick="showAndHidden1();">
									<tbody >
										<tr>
											<td style="cursor:pointer;"><img src="img/ditu.jpg" id="img1" width="23px" height="23px" style=" float:left"/><a title="公司" type="submit" style="float:left;color:#FFFFFF;">张家口东方有限公司</a></td>
										</tr>
										<tr>
											<td style="cursor:pointer;"><img src="img/ditu.jpg" id="img1" width="23px" height="23px" style=" float:left"/><a title="公司" type="submit" id="dizhi2" style="color:#FFFFFF;">张家口百亚有限公司 </a></td>
										</tr>
										<tr>
											<td style="cursor:pointer;"><img src="img/ditu.jpg" id="img1" width="23px" height="23px" style=" float:left"/><a title="公司" type="submit" style="float:left;color:#FFFFFF;">张家口盛欣茂医疗有限公司</a></td>
										</tr>
										<tr>
											<td style="cursor:pointer;"><img src="img/ditu.jpg" id="img1" width="23px" height="23px" style=" float:left"/><a title="公司" type="submit" id="dizhi2" style="color:#FFFFFF;">张家口久泰医疗有限公司 </a></td>
										</tr>
										<tr>
											<td style="cursor:pointer;"><img src="img/ditu.jpg" id="img1" width="23px" height="23px" style=" float:left"/><a title="公司" type="submit" style="float:left;color:#FFFFFF;">张家口英达医疗有限公司</a></td>
										</tr>
										<tr>
											<td style="cursor:pointer;"><img src="img/ditu.jpg" id="img1" width="23px" height="23px" style=" float:left"/><a title="公司" type="submit" id="dizhi2" style="color:#FFFFFF;">张家口智立方医疗有限公司 </a></td>
										</tr>
										<tr>
											<td style="cursor:pointer;"><img src="img/ditu.jpg" id="img1" width="23px" height="23px" style=" float:left"/><a title="公司" type="submit" style="float:left;color:#FFFFFF;">张家口啄木鸟医疗有限公司</a></td>
										</tr>
										<tr>
											<td style="cursor:pointer;"><img src="img/ditu.jpg" id="img1" width="23px" height="23px" style=" float:left"/><a title="公司" type="submit" id="dizhi2" style="color:#FFFFFF;">张家口新千飞医疗有限公司 </a></td>
										</tr>
										<tr>
											<td style="cursor:pointer;"><img src="img/ditu.jpg" id="img1" width="23px" height="23px" style=" float:left"/><a title="公司" type="submit" style="float:left;color:#FFFFFF;">张家口罗可可医疗有限公司</a></td>
										</tr>
										<tr>
											<td style="cursor:pointer;"><img src="img/ditu.jpg" id="img1" width="23px" height="23px" style=" float:left"/><a title="公司" type="submit" id="dizhi2" style="color:#FFFFFF;">张家口优旺医疗有限公司 </a></td>
										</tr>
										<tr>
											<td style="cursor:pointer;"><img src="img/ditu.jpg" id="img1" width="23px" height="23px" style=" float:left"/><a title="公司" type="submit" style="float:left;color:#FFFFFF;">张家口鑫广医疗有限公司</a></td>
										</tr>
										<tr>
											<td style="cursor:pointer;"><img src="img/ditu.jpg" id="img1" width="23px" height="23px" style=" float:left"/><a title="公司" type="submit" id="dizhi2" style="color:#FFFFFF;">张家口百亚医疗有限公司 </a></td>
										</tr>
										<tr>
											<td style="cursor:pointer;"><img src="img/ditu.jpg" id="img1" width="23px" height="23px" style=" float:left"/><a title="公司" type="submit" style="float:left;color:#FFFFFF;">张家口东昌医疗有限公司</a></td>
										</tr>
										<tr>
											<td style="cursor:pointer;"><img src="img/ditu.jpg" id="img1" width="23px" height="23px" style=" float:left"/><a title="公司" type="submit" id="dizhi2" style="color:#FFFFFF;">张家口益捷医疗有限公司</a></td>
										</tr>
										<tr>
											<td style="cursor:pointer;"><img src="img/ditu.jpg" id="img1" width="23px" height="23px" style=" float:left"/><a title="公司" type="submit" id="dizhi2" style="color:#FFFFFF;">张家口金鹿医疗有限公司</a></td>
										</tr>
										<tr>
											<td style="cursor:pointer;"><img src="img/ditu.jpg" id="img1" width="23px" height="23px" style=" float:left"/><a title="公司" type="submit" style="float:left;color:#FFFFFF;">张家口尚方医疗有限公司</a></td>
										</tr>
										<tr>
											<td style="cursor:pointer;"><img src="img/ditu.jpg" id="img1" width="23px" height="23px" style=" float:left"/><a title="公司" type="submit" id="dizhi2" style="color:#FFFFFF;">张家口亿嘉医疗有限公司</a></td>
										</tr>
										<tr>
											<td style="cursor:pointer;"><img src="img/ditu.jpg" id="img1" width="23px" height="23px" style=" float:left"/><a title="公司" type="submit" style="float:left;color:#FFFFFF;">张家口德胜医疗有限公司</a></td>
										</tr>										
									</tbody>
								</table>
							</div>
						</div>
					</li>
					<!--中-->
					<li style="width:52%">
						<!--中上 加入地图下钻+冷链轨迹-->
						<div style="width: 100%; height: 600px;" class="boxall" style="height:623px">
							<div id="main" style="display:block; width: 100%; height: 573px;" class="boxall" style="height:623px">
							</div>
							<div id="container" style="display:none; width: 100%; height: 573px;" class="boxall" style="height:623px">
								
							</div>
						</div>
					</li>
					<li style="width:24%">
						<div  class="boxall" style=" height: 600px;" >
							
							<style type="text/css">
								#jsonList {
									width: 100%;
									margin: auto;
								}
								#jsonList {
									padding: 0px;
									line-height: 40px;
									text-align: center;
								}
							</style>
							<div class="container">
<!-- 								<marquee direction="up" behavior="scroll" marquee scrollamount="7"  width=100% height='500px' onmouseover="this.stop();"
									 onmouseout="this.start();"> -->
									<table border="0" style="color:blue" bordercolor="#909db7" cellspacing="0" cellpadding="0" id="jsonList">
										<tr>
										</tr>
									</table>
							<!-- 	</marquee> -->
					</li>
					<div id="meter3" style="height:230px; width:640px;margin-left:1300px;margin-top:190px; transform:rotate(90deg);">
					</div>	
					<!-- 高德地图轨迹	 -->
					<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=462b4b1ef6bd2d7614c03ee8a3593c65"></script>
					<script type="text/javascript" src="./js/gaodeguiji.js"></script>
					<!-- //	右 -->
					<script>
						function showAndHidden1() {
							var div1 = document.getElementById("main");
							var div2 = document.getElementById("container");
							if (div1.style.display == 'block') div2.style.display = 'none';
							else div1.style.display = 'block';
							div2.style.display = 'none';
						}
					
						function showAndHidden2() {
							var div1 = document.getElementById("main");
							var div2 = document.getElementById("container");
							if (div2.style.display == 'none') div2.style.display = 'block';
							div1.style.display = 'none';
						}
						//一分钟执行一次
						window.setInterval(function() {
				
							     shuaxin();
							   
							
						}, 5000);
						
					</script>
					
					<!-- <script>
						huoqushuju() //显示所有的公司，由于没有HTML的滚动，空间有限最多显示五个公司
						$("#link1").click(function() { //下面为五个公司对应的库房显示，点击哪个公司，显示该公司的库房
							var qiyename = 'title';
							huoqukufang(qiyename)
						});
						$("#link2").click(function() {
							var qiyename = 'title';
							huoqukufang(qiyename)
						});
						$("#link3").click(function() {
							var qiyename = 'title';
							huoqukufang(qiyename)
						});
						$("#link4").click(function() {
							var qiyename = 'title';
							huoqukufang(qiyename)
						});
						$("#link5").click(function() {
							var qiyename = 'title';
							huoqukufang(qiyename)
						});
					</script>

					<script>
						$("#fink1").click(function() { //以下为五个库房的触发，触发后显示该库房的曲线
							var kufangname = kufang[0];
							kufangpipei.push(kufang[0]);
							//获取DOM元素生成echarts对象
							var meter1Chart = echarts.init(document.getElementById("meter1"));
							var meter2Chart = echarts.init(document.getElementById("meter2"));
							//初始化配置
							meter1Chart.setOption(option);
							meter2Chart.setOption(option);
							//仪表
							var meter1 = "温度";
							var meter2 = "湿度";
							//显示加载动画效果
							meter1Chart.showLoading();
							meter2Chart.showLoading();
							//获取数据
							var dataDay = getData(urls.day);
							setData1(dataDay, meter1Chart, kufangname);
							setData2(dataDay, meter2Chart, kufangname);
						});
						$("#fink2").click(function() {
							var kufangname = kufang[1];
							kufangpipei.push(kufang[1]);
							//获取DOM元素生成echarts对象
							var meter1Chart = echarts.init(document.getElementById("meter1"));
							var meter2Chart = echarts.init(document.getElementById("meter2"));
							//初始化配置
							meter1Chart.setOption(option);
							meter2Chart.setOption(option);
							//仪表
							var meter1 = "温度";
							var meter2 = "湿度";
							//显示加载动画效果
							meter1Chart.showLoading();
							meter2Chart.showLoading();
							//获取数据
							var dataDay = getData(urls.day);
							setData1(dataDay, meter1Chart, kufangname);
							setData2(dataDay, meter2Chart, kufangname);
						});
						$("#fink3").click(function() {
							var kufangname = kufang[2];
							kufangpipei.push(kufang[2]);
							//获取DOM元素生成echarts对象
							var meter1Chart = echarts.init(document.getElementById("meter1"));
							var meter2Chart = echarts.init(document.getElementById("meter2"));
							//初始化配置
							meter1Chart.setOption(option);
							meter2Chart.setOption(option);
							//仪表
							var meter1 = "温度";
							var meter2 = "湿度";
							//显示加载动画效果
							meter1Chart.showLoading();
							meter2Chart.showLoading();
							//获取数据
							var dataDay = getData(urls.day);
							setData1(dataDay, meter1Chart, kufangname);
							setData2(dataDay, meter2Chart, kufangname);
						});
						$("#fink4").click(function() {
							var kufangname = kufang[3];
							kufangpipei.push(kufang[3]);
							//获取DOM元素生成echarts对象
							var meter1Chart = echarts.init(document.getElementById("meter1"));
							var meter2Chart = echarts.init(document.getElementById("meter2"));
							//初始化配置
							meter1Chart.setOption(option);
							meter2Chart.setOption(option);
							//仪表
							var meter1 = "温度";
							var meter2 = "湿度";
							//显示加载动画效果
							meter1Chart.showLoading();
							meter2Chart.showLoading();
							//获取数据
							var dataDay = getData(urls.day);
							setData1(dataDay, meter1Chart, kufangname);
							setData2(dataDay, meter2Chart, kufangname);
						});
						$("#fink5").click(function() {
							var kufangname = kufang[5];
							kufangpipei.push(kufang[5]);
							//获取DOM元素生成echarts对象
							var meter1Chart = echarts.init(document.getElementById("meter1"));
							var meter2Chart = echarts.init(document.getElementById("meter2"));
							//初始化配置
							meter1Chart.setOption(option);
							meter2Chart.setOption(option);
							//仪表
							var meter1 = "温度";
							var meter2 = "湿度";
							//显示加载动画效果
							meter1Chart.showLoading();
							meter2Chart.showLoading();
							//获取数据
							var dataDay = getData(urls.day);
							setData1(dataDay, meter1Chart, kufangname);
							setData2(dataDay, meter2Chart, kufangname);
						});
						
					</script> -->
	</body>
</html>